<template>
  <div style=" width: 100%">
    <div class="large">
      <Search></Search>
    </div>
    <div class="box larges">
      <div class="menu">
        <div class="T-itle" style="width: 300px; height: 60px">数据分类信息</div>
        <Menu :arrmenu="MenuData"></Menu>

      </div>
      <div class="Listdata">
        <Describe :describe="describe" @fun="fun"></Describe>
        <Describe :describe="theme" @fun="fun"></Describe>
        <Describe :describe="choice"></Describe>
        <Tabs></Tabs>
        <Listdata :Listarrdata="Listarrdatas"></Listdata>
        <Pagination></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { MenuData, Listarrdata } from '../../api/dataresourApi';
import Search from "./dataresour/Search.vue";
import Menu from "./dataresour/Menu.vue";
import Describe from "./dataresour/Describe.vue";
import Listdata from "./dataresour/Listdata.vue";
import Tabs from "./dataresour/Tabs.vue";
import Pagination from "./dataresour/Pagination.vue";
export default {
  components: {
    Search,
    Menu,
    Describe,
    Listdata,
    Tabs,
    Pagination
  },
  data() {
    return {
      describe: {
        id: '01',
        title: '资源类型',
        dataarr: ['库表', '文件']
      },
      theme: {
        id: '02',
        title: '所属主题',
        dataarr: ['采砂监管', '生态污染源', '自然资源', '污染情况', '自然灾害', '执法监管', '引用水源']
      },
      choice: {
        id: '03',
        title: '已选条件',
        dataarr: ['采砂监管', '执法监管', '引用水源']
      },
      MenuData: [],
      Listarrdatas: [],
    }
  },
  mounted() {
    this.arrmenu();
    this.Listdata();
  },
  methods: {
    fun(val) {
      console.log(val);
    },
    arrmenu() {
      var params = {};
      MenuData(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.MenuData = res.data;
          console.log(res.data)
        }
      });
    },
    Listdata() {
      var params = {};
      Listarrdata(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.Listarrdatas = res.data;
          console.log(res.data)
        }
      });
    },
  },

}
</script>

<style lang="less" scoped>
.large {
  width: 100%;
  height: 100%;
  background: rgba(10, 142, 255, 1);
  // background: red;
}

.larges {
  width: 1200px;
  margin: 0 auto;
}

.box {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.menu {
  height: 100%;
  width: 300px;
}

.Listdata {
  height: 100%;
  width: 876px;
  // background: blue;
}

.T-itle {
  width: 300px;
  height: 60px;
  font-size: 18px;
  background: rgba(10, 142, 255, 1);
  line-height: 60px;
  text-indent: 18px;
  color: #FFFFFF;

}
</style>